<template>
    <div id="header-tab">
        <h3 class="title-header">{{title}}</h3>
    </div>
</template>

<script>
export default {
    name: "headerTab",
    props: ["title"]
}
</script>

<style scoped>
#header-tab {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	max-width: 768px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #b4b2b2;
    box-shadow: 0 2px 3px #696969;
    z-index: 50;
}
#header-tab .title-header,
#header-tab .left-header,
#header-tab .right-header {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#header-tab .title-header {
    flex: 1;
    font-size: 17px;
}
#header-tab .left-header,
#header-tab .right-header {
    padding: 0 12px;
}
#header-tab .left-header:hover,
#header-tab .right-header:hover {
    cursor: pointer;
    background-color: #ace4e4;
}
</style>